<template>
  <div class="container">
    <div class="row" style="overflow: hidden;">

      <a-input allowClear placeholder="订单号" style="width:210px; margin-right: 10px" v-model="number">
      </a-input>
      <a-input allowClear placeholder="外部订单号" style="width:210px; margin-right: 10px" v-model="out_number"></a-input>
      <a-input allowClear placeholder="用户手机" style="width:210px; margin-right: 10px" v-model="user_phone">
      </a-input>
      <a-button type="primary" @click="refresh">查询/不点不查询</a-button>

      <a-radio-group v-model="orderType" buttonStyle="solid" style="margin-left: 20px;">
        <a-radio-button value="package">提货订单({{orderStat.package_all || 0}})</a-radio-button>
        <a-radio-button value="product">商城订单({{orderStat.product_all || 0}})</a-radio-button>
        <a-radio-button value="activity">活动订单({{orderStat.activity_all || 0}})</a-radio-button>
        <a-radio-button value="other">其它订单({{orderStat.other_all || 0}})</a-radio-button>
      </a-radio-group>

      <a href="javascript:;" style="margin-left: 10px;" @click="isFilter = !isFilter">高级筛选</a>
      <!-- <span>高级筛选</span> -->

      <a-button style="margin-left: 30px; float: right;" type="primary" @click="isExport = !isExport">
        <span>导出Excel</span>
      </a-button>

      <a-button style="margin-left: 10px; float: right;" type="primary" @click="isBatchDeliver = true">
        批量发货
      </a-button>
    </div>

    <div class="filter-c" v-if="isFilter">
      <div>
        <span class="key">耗时: </span>
        <a-input allowClear placeholder="订单号/商品/用户名/手机号" style="width:210px; margin-right: 10px" v-model="key">
        </a-input>
      </div>
      <div>
        <span class="key">下单时间: </span>
        <iDatePicker showTime style="margin-left: 10px;" v-model="filter.start_at"></iDatePicker>
        <span style="margin-left: 10px;">至</span>
        <iDatePicker showTime style="margin-left: 10px;" v-model="filter.end_at"></iDatePicker>
      </div>
      <div style="margin-left: 20px;">
        <span class="key">商品金额: </span>
        <a-input style="width: 80px;" placeholder="元" v-model="filter.money_price_min"></a-input>
        <span style="margin:0px 6px;">至</span>
        <a-input style="width: 80px;" placeholder="元" v-model="filter.money_price_max"></a-input>
      </div>
      <div style="margin-left: 20px;">
        <span class="key">实付金额: </span>
        <a-input style="width: 80px;" placeholder="元" v-model="filter.pay_money_price_min"></a-input>
        <span style="margin:0px 6px;">至</span>
        <a-input style="width: 80px;" placeholder="元" v-model="filter.pay_money_price_max"></a-input>
      </div>
      <a-button style="margin-left: 10px; float: right;" type="primary" @click="refresh">
        筛选
      </a-button>
    </div>
    
    <div class="tab-list">
      <div class="item" @click="status = item.key" :class="{actived: status === item.key}"
        v-for="(item, index) in statusList">
        {{item.text}} ({{orderStat[item.key] || 0}})
        <!-- {{item.text}} ({{total}}) -->
      </div>
    </div>

    <div class="order-list">
      <div class="tab-list" v-if="status == 'deliver_pending'">
        <div class="item" @click="huostatus = item.key" :class="{actived: huostatus === item.key}"
          v-for="(item, index) in deliverPendingList">
          {{item.text}}({{item.value || 0}})
        </div>
      </div>
      <OrderItem v-for="(item, idx) in list" :key="item.id" :info="item" :adminId="adminId" @mark="handleMark(idx)" @market="refresh"
        @set-remark="handleSetRemark(idx)" @set-address="handleSetAddress(idx)"
        @edit-deliver-info="handleEditDeliverInfo(idx)" @actions="handleActions($event, idx)" 
        v-if="status!='deliver_pending' || (huostatus == item.storage_status || huostatus=='all')">
      </OrderItem>
      <NoData v-if="!list.length"></NoData>

      <a-pagination v-if="list.length" :showSizeChanger="true" @showSizeChange="onShowSizeChange" :showTotal="total => `共 ${total} 条`" :defaultCurrent="page" v-model="page"
        :total="itemTotal" :pageSize="perPage" @change="pageChange" />
    </div>

    <BatchDeliver @success="batchDeliverSuccess" @hide="isBatchDeliver=false" :isShow="isBatchDeliver"></BatchDeliver>

    <ExportPopup @hide="isExport=false" :isShow="isExport"></ExportPopup>

    <AftersalePopup @refresh="fresh()" v-if="isAftersale" @hide="isAftersale=false" :order="current" :isShow="isAftersale" ></AftersalePopup>
    <GoodsList @refresh="fresh()" v-if="isGoodsList" @hide="isGoodsList=false" :order="current" :isShow="isGoodsList" ></GoodsList>
    <PackagesList @refresh="fresh()" v-if="isPackagesList" @hide="isPackagesList=false" :order="current" :isShow="isPackagesList" ></PackagesList>
  </div>
</template>
<script>
  import OrderItem from './components/OrderItem'
  import {
    // createExport,
    // getOrderList,
    // getOrdersTotal,
    setOrderRemark,
    setOrderAddress,
    orderDeliver,
    orderDeliver2,
    getExpressList,
  } from '@/api/orders'
  import BatchDeliver from "./components/BatchDeliver"
  import ExportPopup from "./components/ExportPopup"
  import GoodsList from "./components/GoodsList"
  import PackagesList from "./components/PackagesList"
  import AftersalePopup from "./components/AftersalePopup"
  import IDatePicker from "@/components/IDatePicker/IDatePicker.vue"

  export default {
    name: 'OrderList',
    components: {
      OrderItem,
      GoodsList,
      PackagesList,
      BatchDeliver,
      ExportPopup,
      AftersalePopup,
      IDatePicker
    },
    props: {},
    data() {
      return {
        // actived: 'on_stock',
        // statusTotal: {
        //   on_stock: 0,
        //   off_stock: 0,
        //   sell_out: 0,
        //   marked: 0
        // },
        isGoodsList: false,
        isPackagesList: false,
        isBatchDeliver: false,
        isAftersale: false,
        isFilter: false,
        isDownload: false,
        miniappType: '',
        orderType: 'package',
        isExport: false,
        filter: {
          start_at: '',
          end_at: ''
        },
        huostatus: 'all',
        deliverPendingList: [
          {
            text: '全部',
            key: 'all',
            value:0,
          },
          {
            text: '有货',
            key: '1',
            value:0,
          },
          {
            text: '缺货',
            key: '0',
            value:0,
          },
          {
            text: '可发货',
            key: '2',
            value:0,
          },
        ],
        statusList: [
          // {
          //   text: '待处理',
          //   key: 'pending'
          // },
          {
            text: '待发货',
            key: 'deliver_pending'
          },
          {
            text: '已发货',
            key: 'delivered'
          },
          // {
          //   text: '已返售',
          //   key: 'backed'
          // },
          {
            text: '已完成',
            key: 'completed'
          },
          {
            text: '全部',
            key: 'all'
          },
          {
            text: '已关闭',
            key: 'closed'
          },
          {
            text: '售后中',
            key: 'aftersale_pending'
          },
          {
            text: '已核销',
            key: 'offline_used'
          },
          {
            text: '标记的',
            key: 'marked'
          },
          {
            text: '可发货',
            key: 'deliver_pending_2'
          }
        ],
        list: [],
        key: "",
        number: "",
        out_number: "",
        user_phone: '',
        status: 'deliver_pending',
        orderStat: {},
        itemTotal: 0,
        page: 1,
        perPage: 10,
        current: {},
        expressList: [],
        total:0,
        adminId:null,
      }
    },
    created() {
      this.refresh()
      //  this.$store.commit("increment",addcounter)
      // console.log('-------------------------------',this.$store.getters.userInfo.id)
      this.adminId = this.$store.getters.userInfo.id
     // const user = this.$store.getters.userInfo
     // console.log(user)
//console.log(this.adminId)
      // 快递
      getExpressList().then(res => {
        this.expressList = res.data.list
      })
    },
    watch: {
      status() {
        this.refresh()
      },
      orderType() {
        this.refresh()
      },
      key() {
        //this.refresh()
      },
      number(){
        //this.refresh()
      },
      out_number(){
        //this.refresh()
      },
      user_phone(){
        //this.refresh()
      },
      page() {
        this.fetchData()
        this.fetchStatData()
      },
      perPage() {
        this.fetchData()
        this.fetchStatData()
      }
    },
    methods: {
      pageChange(e) {
        this.page = e
      },
      onShowSizeChange (current, pageSize) {
        // console.log(current, pageSize)
        this.page = 1
        this.perPage = pageSize
      },
      refresh() {
        this.page = 1
        this.fetchData()
        this.fetchStatData()
      },
      fresh() {
        this.fetchData()
        this.fetchStatData()
      },
      fetchStatData() {
        this.$http.get('/order-stat/total', {
          params: {
            key: this.key,
            number: this.number,
            out_number: this.out_number,
            user_phone : this.user_phone,
            type: this.orderType,
            created_at_start: this.filter.start_at,
            created_at_end: this.filter.end_at,
            money_price_min: this.filter.money_price_min ? this.filter.money_price_min * 100 : '',
            money_price_max: this.filter.money_price_max ? this.filter.money_price_max * 100 : '',
            pay_money_price_min: this.filter.pay_money_price_min ? this.filter.pay_money_price_min * 100 : '',
            pay_money_price_max: this.filter.pay_money_price_max ? this.filter.pay_money_price_max * 100 : '',
          }
        }).then(res => {
          this.orderStat = res.data.info
        })
      },
      fetchData() {
        // if(this.status == 'deliver_pending'){
        //     this.perPage = 10000;
        // }else{
        //     this.perPage = 6;
        // }
        this.$http.get('/orders', {
          params: {
            per_page: this.perPage,
            page: this.page,
            status: this.status,
            type: this.orderType,
            key: this.key,
            number: this.number,
            out_number: this.out_number,
            user_phone : this.user_phone,
            created_at_start: this.filter.start_at,
            created_at_end: this.filter.end_at,
            money_price_min: this.filter.money_price_min ? this.filter.money_price_min * 100 : '',
            money_price_max: this.filter.money_price_max ? this.filter.money_price_max * 100 : '',
            pay_money_price_min: this.filter.pay_money_price_min ? this.filter.pay_money_price_min * 100 : '',
            pay_money_price_max: this.filter.pay_money_price_max ? this.filter.pay_money_price_max * 100 : '',
          }
        }).then(res => {
          this.list = res.data.list
          this.itemTotal=res.data.item_total
          if(this.status == 'deliver_pending'){
            this.deliverPendingList.forEach(item => {
              item.value = 0;
            })

            this.list.forEach(item => {
              this.deliverPendingList[0]['value'] += 1;
              if(item.storage_status === 0){
                this.deliverPendingList[2]['value'] += 1;
              }else if(item.storage_status == 1){
                this.deliverPendingList[1]['value'] += 1;
              }else{
                this.deliverPendingList[3]['value'] += 1;
              }
         
            })
          }
          if(this.status=='deliver_pending_2'){
          //  let a = res.data.list.filter(item=>{
          //   // console.log("item",item);
          //     item.storage_status==2
          //   })
           this.list= res.data.list.filter(ele => ele.storage_status===2)
           console.log(this.list.length)
            console.log("this.list =====aaaa ", this.list);
            // console.log("this.list =====arrFilter ",arrFilter);

          }
          this.total = this.list.length
        })
      },
      deliver() {
        this.$iForm.show({
          frame: [{
              title: '发货方式',
              type: 'radio',
              key: 'type',
              span: 24,
              default: 'express',
              options: [{
                  title: '普通物流快递',
                  value: 'express'
                },
                {
                  title: '无需物流',
                  value: 'other',
                }
              ]
            },
            {
              title: '快递公司',
              type: 'select',
              key: 'express_name',
              newline: true,
              options: this.expressList,
              where: {
                type: 'express'
              }
            },
            {
              title: '快递单号',
              newline: true,
              key: 'express_number',
              placeholder: '快递单号',
              where: {
                type: 'express'
              }
            },
            {
              title: '发货说明',
              newline: true,
              key: 'remark',
              placeholder: '说明(选填)',
              tips: '此说明会显示在用户前端'
            },
          ],
          success: (data) => {
            if (data.type == 'express') {
              if (!data.express_number) {
                this.$message.warn('请填写单号')
                return false
              }
              if (!data.express_name) {
                this.$message.warn('请选择快递公司')
                return false
              }
            }

            orderDeliver(this.current.uuid, data).then(res => {
              // this.refresh()
              this.fetchData()
              this.fetchStatData()
              this.$message.success('发货成功')
              this.$iForm.hide()
            })
          }
        })
      },
      deliver2() {
        this.$iForm.show({
          frame: [
            {
              title: '快递公司',
              key: 'express_name',
              newline: true,
              default: '默认快递',
              disabled:true,
              tips: '对应平台的月结快递公司'
            },
            {
              title: '说明/订单备注',
              newline: true,
              key: 'remark',
              placeholder: '说明(选填)',
              tips: '此说明会显示在用户前端和发货备注中'
            }
          ],
          success: (data) => {
            orderDeliver2(this.current.uuid, data).then(res => {
              this.fetchData()
              this.fetchStatData()
              this.$message.success('发货成功')
              this.$iForm.hide()
            })
          }
        })
      },
      batchDeliverSuccess() {
        this.refresh()
        this.isBatchDeliver = false
      },
      handleActions(type, idx) {
        this.current = this.list[idx]
        switch (type) {
          case '订单发货':
            this.deliver()
            // this.deliverInfo.express_number = ''
            // this.expressNumber = {}
            // this.visible3 = true
            break
          case '运单发货':
            this.deliver2()
            break
          case '商品列表':
            this.isGoodsList = true
            break
          case '抽赏结果':
            this.isPackagesList = 1
            break
          case '取消运单': {
            this.$confirm({
              title: '确认取消运单',
              content: `取消运单后订单将变为待发货状态`,
              onOk: () => {
                this.$http({
                  url: `/orders/${this.current.uuid}`,
                  method: 'PATCH',
                  data: {
                    type: 'deliver2_cancel'
                  }
                }).then(res => {
                  this.$message.success('取消运单成功')
                  this.fetchData()
                  this.fetchStatData()
                })
              }
            })
            break
          }
          case '查看售后':
            this.isAftersale = 1
            // this.deliverInfo.express_number = ''
            // this.expressNumber = {}
            // this.visible3 = true
            break
          case '同意退款': {
            this.$iForm.show({
              title: '同意退款(请确认退款金额)',
              frame: [{
                  type: 'price',
                  key: 'refund_money',
                  title: '原路退款',
                  default: this.current.pay_money_price,
                  tips: '原路退回指退回用户银行卡或微信钱包 <br/>金额不能超出当前订单实付金额(' + (this.current.pay_money_price / 100) + '元)',
                  // required: true
                },
                {
                  type: 'price',
                  key: 'refund_balance',
                  title: '退回余额',
                  default: 0,
                  tips: '实时退回用户帐户余额, 可作为补偿部分填写',
                  // required: true
                },
                {
                  type: 'text',
                  text: this.current.redpack_discount / 100  + '元',
                  key: 'refund_score',
                  title: '红包抵扣退款',
                  tips: '此为用户使用的红包抵扣的退款',
                  default: 1000
                },
                {
                  type: 'text',
                  text: (this.current.pay_score_price + this.current.score_used),
                  key: 'refund_score',
                  title: '积分退款',
                  tips: '此为用户使用的支付或抵扣的积分的退款',
                  default: 1000
                },
                // {
                //   type: 'text',
                //   text: this.current.pay_score_price,
                //   title: '退款金额(积分)',
                //   default: 1000
                // },
              ],
              success: (data) => {
                this.$http({
                  url: `/orders/${this.current.uuid}`,
                  method: 'PATCH',
                  data: {
                    type: 'close_and_refund',
                    ...data
                  }
                }).then(res => {
                  this.$message.success('退款成功');
                  this.$iForm.hide()
                  this.fetchData()
                  this.fetchStatData()
                })
              }
            })
            break
          }
          case '部分退款': {
            this.$message.warn('部分退款功能维护中~')
            return false
            this.$globalForm.show({
              title: '为用户部分退款（款项将原路退回）',
              items: [{
                type: 'string',
                key: 'money',
                title: '退款金额',
                placeholder: '最多 ' + (this.current.pay_price / 100) + '元',
                required: true
              }, ],
              success: (data) => {
                this.$http({
                  url: `/orders/${this.current.uuid}`,
                  method: 'PATCH',
                  data: {
                    type: 'part_refund',
                    ...data
                  }
                }).then(res => {
                  this.$message.success('部分退款成功');
                  this.$globalForm.hide()
                  this.fetchData()
                  this.fetchStatData()
                })
              }
            })
          }
          case '退款并关闭': {
            this.$iForm.show({
              title: '退款并关闭订单',
              frame: [{
                  type: 'price2',
                  key: 'refund_money',
                  title: '原路退款',
                  default: this.current.pay_money_price,
                  tips: '原路退回指退回用户银行卡或微信钱包 <br/>金额不能超出当前订单实付金额(' + (this.current.pay_money_price / 100) + '元)',
                  // required: true
                },
                {
                  type: 'price1',
                  key: 'refund_balance',
                  title: '退回余额',
                  default: 0,
                  tips: '实时退回用户帐户余额, 可作为补偿部分填写',
                  // required: true
                },
                {
                  type: 'text',
                  text: this.current.redpack_discount / 100  + '元',
                  key: 'refund_score',
                  title: '红包抵扣退款',
                  tips: '此为用户使用的红包抵扣的退款',
                  default: 1000
                },
                {
                  type: 'text',
                  text: (this.current.pay_score_price + this.current.score_used),
                  key: 'refund_score',
                  title: '积分退款',
                  tips: '此为用户使用的支付或抵扣的积分的退款',
                  default: 1000
                },
              ],
              success: (data) => {
                if (Math.floor(data.refund_money*100)/100 > this.current.pay_money_price) {
                  this.$message.error('原路退回金额不能超订单实付人民币金额~')
                  return false
                }
                this.$http({
                  url: `/orders/${this.current.uuid}`,
                  method: 'PATCH',
                  data: {
                    type: 'close_and_refund',
                    ...data
                  }
                }).then(res => {
                  this.$message.success('退款成功');
                  this.$iForm.hide()
                  this.fetchData()
                  this.fetchStatData()
                })
              }
            })

            // this.$confirm({
            //   title: '提示',
            //   content: `确认关闭订单并退款吗？支付的人民币及积分将全额原路退回给客户`,
            //   onOk: () => {
            //     this.$http({
            //       url: `/orders/${this.current.uuid}`,
            //       method: 'PATCH',
            //       data: {
            //         type: 'close_and_refund'
            //       }
            //     }).then(res => {
            //       this.$message.success('退款成功')
            //       this.fetchData()
            //       this.fetchStatData()
            //     })
            //   }
            // })
            break
          }
          case '取消退款': {
            this.$confirm({
              title: '确认取消退款',
              content: `取消退款后订单将变为申请退款前的状态`,
              onOk: () => {
                this.$http({
                  url: `/orders/${this.current.uuid}`,
                  method: 'PATCH',
                  data: {
                    type: 'cancel_refund'
                  }
                }).then(res => {
                  this.$message.success('关闭成功')
                  this.fetchData()
                  this.fetchStatData()
                })
              }
            })
            break
          }
          case '撤回物品仓库': {
            this.$iForm.show({
              title: '退款并关闭订单',
              frame: [{
                  title: '退款方式',
                  type: 'radio',
                  default: 'refund_money',
                  options: [
                    {
                      title: '原路退回',
                      value: 'refund_money'
                    },
                    {
                      title: '退回红包(请在无法使用原路退回时使用)',
                      value: 'refund_balance'
                    }
                  ],
                  newline: true,
                  required: true,
                  key: 'refund_type',
                  span: 24
                },
              ],
              success: (data) => {
                this.$http({
                  url: `/orders/${this.current.uuid}`,
                  method: 'PATCH',
                  data: {
                    type: 'reset_to_package',
                    ...data
                  }
                }).then(res => {
                  this.$message.success('撤回成功')
                  this.$iForm.hide()
                  this.fetchData()
                  this.fetchStatData()
                })
              }
            })
            break
          }
        }
      },
      handleMark(idx) {
        this.current = this.list[idx]
        let type = this.current.marked_at ? 'unmark' : 'mark';
        this.$http({
          url: '/orders/' + this.current.uuid,
          method: 'PATCH',
          data: {
            type: type
          }
        }).then(res => {
          this.refresh()
          this.$message.success('操作成功')
        })
      },
      handleSetRemark(idx) {
        this.current = this.list[idx]
        this.$iForm.show({
          frame: [{
            title: '商家备注',
            type: 'textarea',
            tips: '此备注仅显示在管理后台，用户无法看到',
            key: 'remark',
            span: 24,
            default: this.current.seller_remark,
          }],
          success: (data) => {
            setOrderRemark(this.current.uuid, data.remark).then(res => {
              this.fetchData()
              this.$message.success('更新成功')
              this.$iForm.hide()
            })
          }
        })
      },
      handleSetAddress(idx) {
        this.current = this.list[idx]
        let address = this.current.address || {}
        this.$iForm.show({
          title: '更改收货地址',
          frame: [{
              title: '收件人',
              type: 'input',
              key: 'consignee',
              span: 24,
              default: address.consignee,
            },
            {
              title: '手机号',
              type: 'input',
              key: 'phone',
              span: 24,
              default: address.phone,
            },
            {
              title: '所在地区',
              type: 'address',
              key: 'area',
              span: 24,
              default: [address.province, address.city, address.district],
            },
            {
              title: '详细地址',
              type: 'textarea',
              key: 'address',
              span: 24,
              default: address.address,
            }
          ],
          success: (data) => {
            setOrderAddress(this.current.uuid, {
              province: data.area[0],
              city: data.area[1],
              district: data.area[2],
              address: data.address,
              consignee: data.consignee,
              phone: data.phone
            }).then(res => {
              this.refresh()
              this.$message.success('更新成功')
              this.$iForm.hide()
            })
          }
        })
      },
      handleEditDeliverInfo(idx) {
        this.current = this.list[idx]
        let form = this.current.deliver_record || {}
        this.$iForm.show({
          form: form,
          frame: [{
              title: '发货方式',
              type: 'radio',
              key: 'type',
              span: 24,
              default: 'express',
              options: [{
                  title: '普通物流快递',
                  value: 'express'
                },
                {
                  title: '无需物流',
                  value: 'other',
                }
              ]
            },
            {
              title: '快递公司',
              type: 'select',
              key: 'express_name',
              newline: true,
              options: this.expressList,
              where: {
                type: 'express'
              }
            },
            {
              title: '快递单号',
              newline: true,
              key: 'express_number',
              placeholder: '快递单号',
              where: {
                type: 'express'
              }
            },
            {
              title: '发货说明',
              newline: true,
              key: 'remark',
              placeholder: '说明(选填)',
              tips: '此说明会显示在用户前端'
            },
          ],
          success: (data) => {
            if (data.type == 'express') {
              if (!data.express_number) {
                this.$message.warn('请填写单号')
                return false
              }
              if (!data.express_name) {
                this.$message.warn('请选择快递公司')
                return false
              }
            }

            this.$http.put(`/orders/${this.current.uuid}`, {
              type: 'update_deliver_info',
              deliver_info: data,
            }).then(res => {
              // this.refresh()
              this.fetchData()
              this.fetchStatData()
              this.$message.success('发货成功')
              this.$iForm.hide()
            })
          }
        })
      },
    }
  }
</script>
<style lang="scss">
  .empty-tips {
    color: gray;
    margin-left: 100px;
    margin-top: 80px;
  }

  .filter-c {
    // margin: 20px 0px 0px 0px;
    margin-top: 10px;
    padding: 10px 10px 10px 10px;
    background: #F7F8FA;

    display: flex;

    .key {
      font-weight: 500;
    }
  }

  .orders-wrapper {
    padding: 0px;
    background-color: #fff;
  }


  .tab-list {
    display: flex;
    margin-top: 20px;
    border-bottom: 1px solid #e1e1e1;

    .item {
      margin-right: 30px;
      padding: 0px 10px 4px 10px;
      cursor: pointer;
      font-weight: 500;

      &.actived {
        color: #1890FF;
        border-bottom: 3px solid #1890FF;
      }

      &:hover {
        color: #1890FF;
      }
    }
  }

  .order-list {
    padding-bottom: 100px;
    margin-top: 20px;
  }
</style>